<template>
    <div class="pageContainer">
        <div class="searchWarp">
            <template v-for="condition in listCondition">
                <CCondition :condition="condition"></CCondition>
            </template>
            <div class="schLine">
                <CBtn @click="search(1)">查询</CBtn>
            </div>
        </div>
        <div class="treeTable">
            <div style="flex:1;">
                <div class="btnWarp">
                    <CBtn @click="showEdit">新增</CBtn>
                    <CBtn @click="doBatchDel()">批量删除</CBtn>
                </div>
                <CPageTable :data="tableData" :curPage="paging.curPage" :total="paging.total" 
                    @changeSelect="changeSelect"
                    @changeSize="changeSize"
                    @changePage="search">
                    <template slot-scope="scope">
                        <CBtn type="text" @click="showVote(scope.row)">授权</CBtn>
                        <CBtn type="text" @click="showEdit(scope.row)">修改</CBtn>
                        <CBtn type="text" @click="doDel(scope.row)">删除</CBtn>
                    </template>

                </CPageTable>
            </div>
        </div>

        <CDailog title="新增/编辑" :isShow="isShowEdit" @close="isShowEdit = false" @enter="doSave">
            <el-form :inline="true">
                <CText form v-model="mm.code" title="编码" field="code"></CText>
                <CText form v-model="mm.name" title="名称" field="name"></CText>
            </el-form>
        </CDailog>
        <CDailog title="角色授权" :isShow="isShowVote" @close="isShowVote = false" :isShowEnter="false">
            <div class="box_warp">
                
                <el-row>
                    <el-col :span="10">
                        <el-tree style="width:100%;" @current-change="changeFirstMenu" ref="menuGroupTree" :highlight-current="true" :data="listMenuGroup" node-key="id" 
                        :props="treeProps">
                        </el-tree>
                    </el-col>
                    <el-col :span="8">
                        <div class="menuwarp">
                            <el-tree style="width:100%;" @check="chooseVote" ref="menuTree" :data="curMenus" show-checkbox node-key="id" :default-expanded-keys="[]" :default-checked-keys="checkedIds"
                            :props="treeProps">
                                <div class="nodewarp" slot-scope="{ node, data }">
                                    <div style="width: 120px;">{{ node.label }}</div>
                                    <!-- <div style="">
                                        <el-checkbox v-model="node.data.allowVote" true-label="Y" false-label="N">是否可授权</el-checkbox>
                                    </div> -->
                              </div>
                            </el-tree>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </CDailog>
    </div>
</template>

<script>
import pagingMixin from '@/mixin/pagingMixin'
export default {
    mixins: [pagingMixin],
    data() {
        return {
            treeData: [],
            treeProps: {
                children: 'listChild',
                label: 'label'
            },
            listSystem: [],
            listMenuGroup: [],
            listMenu: [],
            model: "ums",
            table: "UmsRole",
            isShowVote: false,
            curRoleId: "",
            checkedIds: [],
            curFirstMenuId: ""
        }
    },
    computed:{
        canVote(){
            return (node) => {
                let checkedNodes = this.$refs.menuTree.getCheckedNodes(false, true);
                console.log(checkedNodes);
                return checkedNodes.find(item => item.id == node.id);
            }
        },
        curMenus() {
            if (this.curFirstMenuId) {
                return this.listMenu.filter(item => item.parentId == this.curFirstMenuId);
            } else {
                return this.listMenu;
            }
        }
    },
    created() {
        this.templateId = "13e00cda-e6cd-4397-91fb-c19c3f2e7cb1";

        //取得查询条件
        this.$sys.getPageConditions({ id: this.templateId }).then(res => {
            this.listCondition = res.data;
        })
        //查询表格数据
        this.search(1);
    },
    methods: {
        chooseVote(node, state) {
            this.$ums.saveSingleVote({curRoleId:this.curRoleId, permId: node.id}).then(res => {
                if (200 == res.code) {
                    if (res.data == "new") {
                        this.checkedIds.push(node.id);
                    } else {
                        let delIndex = this.checkedIds.findIndex(id => id == node.id);
                        this.checkedIds.splice(delIndex, 1);
                    }
                    this.$message.success("操作成功");
                } else {
                    this.$message.error("操作失败");
                }
            })
        },
        changeFirstMenu(node) {
            this.curFirstMenuId = node.id;
        },
        showVote(row) {
            this.$ums.getAllVoteMenu({id: row.id}).then(res => {
                this.treeData = res.data.tree;
                this.listSystem = this.treeData.map(item => {
                    return {
                        id: item.id,
                        label: item.label
                    }
                })
                this.listMenuGroup = [];
                this.listMenu = [];
                for (let obj of this.treeData) {
                    this.listMenuGroup.push(...obj.listChild.map(item => {
                        if (item.listChild) {
                            this.listMenu.push(...item.listChild.map(node => {
                                let canVote = res.data.ownIds.find(item => item.fk_perm_id == node.id);
                                return {
                                    id: node.id,
                                    systemId: obj.id,
                                    parentId: item.id,
                                    menuId: item.id,
                                    label: node.label,
                                    allowVote: canVote ? canVote.canVote : 'N'
                                }
                            }));
                        }
                        return {
                            id: item.id,
                            label: obj.label + "-" + item.label
                        }
                    }));
                }
                
                this.checkedIds = res.data.ownIds.map(item => item.fk_perm_id);
                this.isShowVote = true;
                this.curRoleId = row.id;
            })
            
        },
        doVote() {
            let checkedNodes = this.$refs.menuTree.getCheckedNodes(false, true);
            console.log(checkedNodes,33);
            let ids = checkedNodes.filter(item => {
                if (item.listChild && item.listChild.length > 0) {
                    return false;
                } else {
                    return true;
                }
            }).map(item => {
                return {
                    id: item.id,
                    allowVote: item.allowVote
                }
            });
            
            this.$ums.saveVote({
                curRoleId: this.curRoleId,
                listPermissionIds: ids
            }).then(res => {
                this.$u.showResultMsg(res);
                this.isShowVote = false;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.menuwarp {
    width: 350px;
    height: 500px;
    overflow-y: auto;
}
::v-deep.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #5198da;
    color: white;
}

.nodewarp {
    display: flex;
}
</style>